<style>
.pure_table_extra { width: 100%; margin-top: 5px; }
.pure_table_extra th { height: 25px; line-height: 25px; }
.pure_table_extra img { cursor: pointer; margin-right: 2px; }
.pure_table_extra td { vertical-align: middle; }
</style>

<?php
$data = $orm->get('pb_ecom_hm_gallery', 't.id', 'DESC', NULL, NULL, NULL)->d;
?>

<button onclick="Url.redirect(__redmd, __sys + '.php?i=' + __id + '&__file=index_image&pg=' + __data.p);" class="pure-button pure-button-primary">New Image</button>
<div class="dd" id="nestable3"></div>
<div>&nbsp;</div>

<script type="text/javascript">
  /*<![CDATA[*/
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __root;
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __prev_ajax;
  
  $(function() {
    reset();
    render();
  });

  function reset() {
    __data = __data.sort(function(a, b) {
      return parseFloat(a.order, 10) > parseFloat(b.order, 10);
    });
    __root = Utils.get_root(__data);
  };

  function render() {
    render_data();
  };
  
  function render_data() {
    var elm;
    $('#nestable3').empty();
    $('#nestable3').append('<ol id="pgol_' + __root.id + '"  class="dd-list"></ol>');
    __render_data(__root, $('#pgol_' + __root.id));
    
    var func = function(e) {
      if (e.target.id == 'nestable3') {
        update_objs();
      }
    };
    
    // activate Nestable for list 1
    $('#nestable3').nestable({
      maxDepth: 1
    }).on('change', func);
  };

  function __render_data(node, elm) {
    for (var idx in node.__c) {
      var itm = node.__c[idx];
      elm.append('<li class="dd-item dd3-item" data-id="' + itm.id + '" data-name="' + itm.name + '" data-parent_id="' + itm.parent_id + '" data-order="' + itm.order + '">' +
                   '<div class="dd-handle dd3-handle">&nbsp;</div>' +
                   '<div class="dd3-content">' +
                      Utils.get_short(itm.txt, 50) +
                     '<span class="ui-button-icon-primary ui-icon ui-icon-closethick" onclick="delete_obj(' + itm.id + ');"></span>' + 
                     '<span class="ui-button-icon-primary ui-icon ui-icon-pencil" onclick="Url.redirect(' + __redmd + ', \'' + __sys + '.php?i=' + __id + '&__file=index_image&id=' + itm.id + '\');"></span>' + 
                     '</div>' + 
                   ((itm.__c.length > 0) ? '<ol id="pgol_' + itm.id + '"  class="dd-list"></ol>' : '') + 
                 '</li>');
      if (itm.__c.length > 0) {
        __render_data(itm, $('#pgol_' + itm.id));
      }
    }
  };

  function update_objs() {
    if (__prev_ajax) {
      __prev_ajax.abort();
    }

    var objs = Utils.get_array($('#nestable3').nestable('serialize'), 0);
    for (var idx in __data) {
      var itm = __data[idx];
      var obj = Utils.get_by_id(itm.id, objs);
      if (obj) {
        itm.parent_id = obj.parent_id;
        itm.order = obj.order;
      }
    }
    
    __prev_ajax = Ajax.request(
      __requrl + 'update_objs',
      'reqs=' + Utils.encodeURI(JSON.stringify(__data)),
      function(rslt) {
      },
      { silent: 1 }
    );
  };
  
  function delete_obj(id) {
    var req = Utils.get_by_id(id, __data);
    
    Ajax.request(
      __requrl + 'delete_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data = rslt;
        reset();
        render();
      },
      { confirm: 1 }
    );
  };
  /*]]>*/
</script>